@fluentui/style-utilities

Theming

Theming allows you to create a consistent look and feel across your application by defining a set of colors and styles. The `createTheme` function helps you generate a theme object that can be used throughout your application.

const { createTheme } = require('@fluentui/style-utilities');

const myTheme = createTheme({
  palette: {
    themePrimary: '#0078d4',
    themeLighterAlt: '#eff6fc',
    themeLighter: '#deecf9',
    themeLight: '#c7e0f4',
    themeTertiary: '#71afe5',
    themeSecondary: '#2b88d8',
    themeDarkAlt: '#106ebe',
    themeDark: '#005a9e',
    themeDarker: '#004578',
    neutralLighterAlt: '#f8f8f8',
    neutralLighter: '#f4f4f4',
    neutralLight: '#eaeaea',
    neutralQuaternaryAlt: '#dadada',
    neutralQuaternary: '#d0d0d0',
    neutralTertiaryAlt: '#c8c8c8',
    neutralTertiary: '#c2c2c2',
    neutralSecondary: '#858585',
    neutralPrimaryAlt: '#4b4b4b',
    neutralPrimary: '#333333',
    neutralDark: '#272727',
    black: '#1d1d1d',
    white: '#ffffff'
  }
});

Responsive Design

Responsive design utilities help you create styles that adapt to different screen sizes. The `getScreenSelector` function returns a media query string for a given breakpoint, which can be used to apply styles conditionally.

const { getScreenSelector } = require('@fluentui/style-utilities');

const screenSelector = getScreenSelector('medium');

const styles = {
  root: {
    [screenSelector]: {
      backgroundColor: 'blue'
    }
  }
};

Style Merging

Style merging allows you to combine multiple style objects into a single class name. The `mergeStyles` function takes one or more style objects and returns a class name that can be applied to a component.

const { mergeStyles } = require('@fluentui/style-utilities');

const classNames = mergeStyles({
  backgroundColor: 'red',
  selectors: {
    ':hover': {
      backgroundColor: 'blue'
    }
  }
});